<template>
  <div class="right-wrap">
    <h2>表单项内容</h2>
    <form-comp v-model:formItem="formOption" v-model:formData="formOptionData">
      <template v-slot:sortSlot>
        <div class="flex-yc">
          <el-button
            type="primary"
            size="small"
            link
            :icon="Top"
            @click="onCustomItemMove('up')"
          >
            上移
          </el-button>
          <el-button
            type="primary"
            size="small"
            link
            :icon="Bottom"
            @click="onCustomItemMove('down')"
          >
            下移
          </el-button>
          <el-button
            type="primary"
            size="small"
            link
            :icon="Delete"
            @click="onCustomItemMove('del')"
          >
            删除
          </el-button>
        </div>
      </template>
    </form-comp>
    <div class="flex-xbt" v-if="formItemIndexType">
      <h2>选项</h2>
      <el-button type="primary" size="small" @click="onAddOption">
        添加选项
      </el-button>
    </div>
    <el-form ref="optionRef">
      <el-row :gutter="10" v-for="(item, i) in optionForm" :key="i">
        <el-col :span="11" v-for="child in item" :key="child.label">
          <el-form-item :label="child.label">
            <el-input v-model="child.value"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="2"
          style="margin-top: 8px; cursor: pointer"
          @click="onDelOption(i)"
        >
          <el-icon title="删除" color="#909399">
            <DeleteFilled />
          </el-icon>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import FormComp from '@/components/form/form.vue'
import { computed, watch } from 'vue'
import { Delete, Top, Bottom } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import useAppDevStore from '@/store/modules/member/app/develop.ts'

const {
  formOptionData,
  optionForm,
  formItemKey,
  formItemIndexType,
  formOption,
  formItem,
} = storeToRefs(useAppDevStore())

watch(formItemIndexType, (val) => {
  if (val) onAddOption()
})

const formItemOptions = computed(() => {
  return optionForm.value.map((option) => ({
    label: option[0].value,
    value: option[1].value,
  }))
})
watch(
  [optionForm, formOptionData],
  () => {
    formItem.value.map((item) => {
      if (item.key === formItemKey.value) {
        item.label = formOptionData.value.title
        item.prop = formOptionData.value.tableName
        item.order = formOptionData.value.order
        item.sort = formOptionData.value.sort
        item.placeholder = formOptionData.value.titleEn
        item.options = formItemOptions.value
        item.col = formOptionData.value.them
      }
    })
  },
  { deep: true, immediate: true },
)

const onAddOption = () => {
  optionForm.value.push([
    { label: '名称', value: '' },
    { label: '值', value: '' },
  ])
}

const onDelOption = (index: number) => {
  if (optionForm.value.length <= 1) return
  optionForm.value.splice(index, 1)
}

// 点击上移下移
const onCustomItemMove = (type: string) => {
  const formItemIndex = formItem.value.findIndex(
    (item) => item.key === formItemKey.value,
  )
  if (type === 'del') return formItem.value.splice(formItemIndex, 1)
  if (type === 'up' && formItemIndex === 0) return
  if (type === 'down' && formItemIndex === formItem.value.length - 1) return

  const formDelItem = formItem.value.splice(formItemIndex, 1)
  if (type === 'up') formItem.value.splice(formItemIndex - 1, 0, ...formDelItem)
  if (type === 'down')
    formItem.value.splice(formItemIndex + 1, 0, ...formDelItem)
}
</script>

<style scoped lang="scss">
.right-wrap {
  width: 300px;
  padding: 28px 18px;
  background-color: #fff;

  h2 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #021429;
  }
}
</style>
